<template>
  <div class="app-container">
    <div style="display: flex;">
      <div style="width: 50%;">
        <el-divider content-position="left">阿里物流配置</el-divider>
        <el-form ref="alForm" :model="alForm" :rules="alRules" size="small" label-width="150px">
          <el-form-item label="快递查询密钥" prop="ali_express_app_code">
            <el-input v-model="alForm.ali_express_app_code" type="password" placeholder="请输入快递查询密钥"/>
          </el-form-item>
          <el-form-item label="">
            <el-button type="primary" @click="doAlSubmit('alForm')">提交</el-button>
          </el-form-item>
        </el-form>
      </div>
      <div style="width: 50%;">
        <el-divider content-position="left">百度OCR配置</el-divider>
        <el-form ref="ocrForm" :model="ocrForm" :rules="ocrRules" size="small" label-width="150px">
          <el-form-item label="apiKey" prop="baidu_ocr_api_key">
            <el-input v-model="ocrForm.baidu_ocr_api_key" style="width: 370px;" />
          </el-form-item>
          <el-form-item label="apiSecret" prop="baidu_ocr_api_secret_key">
            <el-input v-model="ocrForm.baidu_ocr_api_secret_key" style="width: 370px;" type="password" />
          </el-form-item>
          <el-form-item label="">
            <el-button type="primary" @click="doOcrSubmit('ocrForm')">提交</el-button>
          </el-form-item>
        </el-form>
      </div>
      
    </div>
    <div style="display: flex;">
      <div style="width: 50%;">
        <el-divider content-position="left">顺丰速运API配置</el-divider>
        <el-form ref="form" :model="sfForm" :rules="sfRules" size="small" label-width="150px">
          <el-form-item label="开启"  prop="sf_sy_exp_enable">
            <el-radio v-model="sfForm.sf_sy_exp_enable" :label="1">开启</el-radio>
            <el-radio v-model="sfForm.sf_sy_exp_enable" :label="2">关闭</el-radio>
          </el-form-item>
          <el-form-item label="环境标志" prop="sf_sy_env_enable">
            <el-radio v-model="sfForm.sf_sy_env_enable" :label="1">沙箱环境</el-radio>
            <el-radio v-model="sfForm.sf_sy_env_enable" :label="2">生产环境</el-radio>
          </el-form-item>
          <el-form-item label="顾客编码" prop="sf_sy_client_code">
            <el-input v-model="sfForm.sf_sy_client_code" style="width: 370px;" />
          </el-form-item>
          <el-form-item label="沙箱校验码" prop="sf_sy_dev_check_word">
            <el-input v-model="sfForm.sf_sy_dev_check_word" style="width: 370px;" type="password" />
          </el-form-item>
          <el-form-item label="生产校验码" prop="sf_sy_prd_check_word">
            <el-input v-model="sfForm.sf_sy_prd_check_word" style="width: 370px;" type="password" />
          </el-form-item>
          <el-form-item label="">
            <el-button type="primary" @click="doSfSubmit">提交</el-button>
          </el-form-item>
        </el-form>
      </div>
      <div style="width: 50%;">
        <el-divider content-position="left">菜鸟物流配置(由于接口费用太贵未开启)</el-divider>
        <el-form ref="form" :model="form" :rules="rules" size="small" label-width="150px">
          <el-form-item label="开启">
            <el-radio v-model="form.exp_enable" :label="1">开启</el-radio>
            <el-radio v-model="form.exp_enable" :label="2">关闭</el-radio>
          </el-form-item>
          <el-form-item label="appId">
            <el-input v-model="form.exp_appId" style="width: 370px;" />
          </el-form-item>
          <el-form-item label="appKey">
            <el-input v-model="form.exp_appKey" style="width: 370px;" type="password" />
          </el-form-item>
          <el-form-item label="">
            <el-button type="primary" @click="doSubmit">提交</el-button>
          </el-form-item>
        </el-form>
      </div>
    </div>
    
  </div>
</template>

<script>
import checkPermission from '@/utils/permission'
import initData from '@/mixins/crud'
import { del, add, get } from '@/api/yxSystemConfig'
import eForm from './form'
import picUpload from '@/components/pic-upload'
import { Message } from 'element-ui'
export default {
  components: { eForm, picUpload },
  mixins: [initData],
  data() {
    return {
      delLoading: false,
      alForm: {
        ali_express_app_code: ''
      },
      ocrForm:{
        baidu_ocr_api_key: '',
        baidu_ocr_api_secret_key: ''
      },
      form: {
        exp_enable: 2,
        exp_appId: '',
        exp_appKey: ''
      },
      sfForm:{
        sf_sy_exp_enable :1,
        sf_sy_env_enable :1,
        sf_sy_client_code :'',
        sf_sy_dev_check_word :'',
        sf_sy_prd_check_word :''
      },
      sfForm: {
        sf_sy_exp_enable: [
            { required: true, message: '请选择是否启用', trigger: 'blur' }
        ],
        sf_sy_env_enable: [
            { required: true, message: '请选择环境', trigger: 'blur' }
        ],
        sf_sy_client_code: [
            { required: true, message: '请输入客户编码', trigger: 'blur' }
        ],
        sf_sy_dev_check_word: [
            { required: true, message: '请输入沙箱校验码', trigger: 'blur' }
        ],
        sf_sy_prd_check_word: [
            { required: true, message: '请输入生产校验码', trigger: 'blur' }
        ]
        
      },
      rules: {
        exp_appId: [
            { required: true, message: '请输入exp_appId', trigger: 'blur' }
        ]
        
      },
      alRules: {
        ali_express_app_code: [
            { required: true, message: '请输入快递查询密钥', trigger: 'blur' }
        ]
        
      },
      ocrRules: {
        baidu_ocr_api_key: [
            { required: true, message: '请输入百度ocrKey', trigger: 'blur' }
        ],
        baidu_ocr_api_secret_key: [
            { required: true, message: '请输入百度ocrSecret', trigger: 'blur' }
        ]
        
      }
    }
  },
  created() {
    get().then(rese => {
      const that = this;
      rese.content.map(function(key, value) {
        const keyName = key.menuName
        const newValue = key.value
        if(keyName in that.form){
          that.form[keyName] = newValue
        }

        if(keyName in that.alForm){
          that.alForm[keyName] = newValue
        }
        if(keyName in that.ocrForm){
          that.ocrForm[keyName] = newValue
        }

        if(keyName in that.sfForm){
          that.sfForm[keyName] = newValue
        }
     
      })
      this.form.exp_enable = parseInt(this.form.exp_enable)
      this.sfForm.sf_sy_exp_enable = parseInt(this.sfForm.sf_sy_exp_enable)
      this.sfForm.sf_sy_env_enable = parseInt(this.sfForm.sf_sy_env_enable)
    })
  },
  methods: {
    checkPermission,
    doSubmit() {
      add(this.form).then(res => {
        Message({ message: '设置成功', type: 'success' })
      }).catch(err => {
        // this.loading = false
        console.log(err.response.data.message)
      })
    },
    doSfSubmit() {
      add(this.sfForm).then(res => {
        Message({ message: '设置成功', type: 'success' })
      }).catch(err => {
        // this.loading = false
        console.log(err.response.data.message)
      })
    },
    doAlSubmit(formName) {
      this.$refs[formName].validate((valid) => {
          if (valid) {
            add(this.alForm).then(res => {
              Message({ message: '设置成功', type: 'success' })
            }).catch(err => {
              // this.loading = false
              console.log(err.response.data.message)
            })
          } else {
            console.log('error submit!!');
            return false;
          }
        });
      
    },
    doOcrSubmit(formName) {
      this.$refs[formName].validate((valid) => {
          if (valid) {
            add(this.ocrForm).then(res => {
              Message({ message: '设置成功', type: 'success' })
            }).catch(err => {
              // this.loading = false
              console.log(err.response.data.message)
            })
          } else {
            console.log('error submit!!');
            return false;
          }
        });
      
    }

  }
}
</script>

<style scoped>

</style>
